<style scoped lang="less">
  .index{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    h1{
      height: 150px;
      margin-bottom: 20px;
      img{
        height: 100%;
      }
    }
    h2{
      color: #666;
      margin-bottom: 200px;
      p{
        margin: 0 0 50px;
      }
    }
    .ivu-row-flex{
      height: 100%;
    }
  }
</style>
<template>
  <div class="index">
    <Row type="flex" justify="center" align="middle">
      <i-col span="24">
        <h1>
          <img src="../img/logo.png">
        </h1>
        <h2>
          <p>Welcome to BB app!</p>
          <Button type="primary" @click="handleStart">Start BB</Button>
          <router-link to="/hi?q=8888"><Button type="primary">Go Hi</Button></router-link>
        </h2>
      </i-col>
    </Row>
  </div>
</template>
<script>
export default {
  mounted: function () {
    $('.ivu-btn-ghost').css('background-color', '#2d8cf0')
    $('.ivu-btn-ghost').css('color', '#fff')
  },
  methods: {
    name: 'HelloWorld',
    handleStart () {
      this.$Modal.info({
        title: 'Bravo',
        content: 'Now, enjoy the convenience of BB.'
      })
    }
  }
}
</script>
